<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="600px" :title="drawerProps.title">
    <template #header>
      <h4>{{ drawerProps.title }}</h4>
    </template>

    <div class="detail-container">
      <!-- 基本信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <div class="card-header">
            <span>基本信息</span>
            <el-tag :type="getStatusType(drawerProps.row.status)">
              {{ getStatusText(drawerProps.row.status) }}
            </el-tag>
          </div>
        </template>

        <el-descriptions :column="2" border>
          <el-descriptions-item label="替代料ID">
            {{ drawerProps.row.id || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="MBOM编码">
            {{ drawerProps.row.mbomCode || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="MBOM名称">
            {{ drawerProps.row.mbomName || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="MBOM项ID">
            {{ drawerProps.row.mbomItemId || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="主料编码">
            {{ drawerProps.row.mainMaterialCode || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="主料名称">
            {{ drawerProps.row.mainMaterialName || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="替代料编码">
            {{ drawerProps.row.substituteMaterialCode || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="替代料名称">
            {{ drawerProps.row.substituteMaterialName || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="替代比例">
            {{ drawerProps.row.substituteRatio ? `${drawerProps.row.substituteRatio}%` : "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="优先级">
            {{ drawerProps.row.priority || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="状态">
            <el-tag :type="getStatusType(drawerProps.row.status)">
              {{ getStatusText(drawerProps.row.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="创建人">
            {{ drawerProps.row.createdBy || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 有效期信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <span>有效期信息</span>
        </template>

        <el-descriptions :column="2" border>
          <el-descriptions-item label="有效期开始">
            {{ formatDateTime(drawerProps.row.validFrom) }}
          </el-descriptions-item>
          <el-descriptions-item label="有效期结束">
            {{ formatDateTime(drawerProps.row.validTo) }}
          </el-descriptions-item>
          <el-descriptions-item label="是否在有效期内" :span="2">
            <el-tag :type="isWithinValidPeriod() ? 'success' : 'danger'">
              {{ isWithinValidPeriod() ? '是' : '否' }}
            </el-tag>
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 审核信息 -->
      <el-card v-if="showRejectInfo" class="detail-card" shadow="never">
        <template #header>
          <span>审核信息</span>
        </template>

        <el-descriptions :column="1" border>
          <el-descriptions-item label="拒绝原因">
            {{ drawerProps.row.rejectReason || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 时间信息 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <span>时间信息</span>
        </template>

        <el-descriptions :column="2" border>
          <el-descriptions-item label="创建时间">
            {{ formatDateTime(drawerProps.row.createdTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="更新时间">
            {{ formatDateTime(drawerProps.row.updatedTime) }}
          </el-descriptions-item>
          <el-descriptions-item label="创建人">
            {{ drawerProps.row.createdBy || "-" }}
          </el-descriptions-item>
          <el-descriptions-item label="更新人">
            {{ drawerProps.row.updatedBy || "-" }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 操作历史 -->
      <el-card class="detail-card" shadow="never">
        <template #header>
          <span>操作历史</span>
        </template>

        <el-timeline>
          <el-timeline-item
            v-if="drawerProps.row.createdTime"
            :timestamp="formatDateTime(drawerProps.row.createdTime)"
            placement="top"
          >
            <el-card>
              <h4>创建替代料</h4>
              <p>创建人: {{ drawerProps.row.createdBy }}</p>
              <p>替代料: {{ drawerProps.row.substituteMaterialName }}</p>
              <p>替代比例: {{ drawerProps.row.substituteRatio }}%</p>
            </el-card>
          </el-timeline-item>

          <el-timeline-item
            v-if="drawerProps.row.status === 'PENDING_APPROVAL'"
            :timestamp="formatDateTime(drawerProps.row.updatedTime)"
            placement="top"
          >
            <el-card>
              <h4>提交审批</h4>
              <p>状态变更为: 待审批</p>
            </el-card>
          </el-timeline-item>

          <el-timeline-item
            v-if="drawerProps.row.status === 'ACTIVE'"
            :timestamp="formatDateTime(drawerProps.row.updatedTime)"
            placement="top"
          >
            <el-card>
              <h4>审核通过</h4>
              <p>替代料已可用于MES投料</p>
            </el-card>
          </el-timeline-item>

          <el-timeline-item
            v-if="drawerProps.row.status === 'REJECTED'"
            :timestamp="formatDateTime(drawerProps.row.updatedTime)"
            placement="top"
          >
            <el-card>
              <h4>审核拒绝</h4>
              <p>拒绝原因: {{ drawerProps.row.rejectReason }}</p>
            </el-card>
          </el-timeline-item>

          <el-timeline-item
            v-if="drawerProps.row.status === 'EXPIRED'"
            :timestamp="formatDateTime(drawerProps.row.validTo)"
            placement="top"
          >
            <el-card>
              <h4>替代料过期</h4>
              <p>已超过有效期，不可用于MES投料</p>
            </el-card>
          </el-timeline-item>

          <el-timeline-item
            v-if="drawerProps.row.status === 'OBSOLETED'"
            :timestamp="formatDateTime(drawerProps.row.updatedTime)"
            placement="top"
          >
            <el-card>
              <h4>替代料废止</h4>
              <p>已被主动废止，不再推荐使用</p>
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </div>
  </el-drawer>
</template>

<script setup lang="ts" name="SubstituteMaterialDetail">
import { ref, computed } from "vue";
import { SubstituteMaterial } from "@/api/modules/substituteMaterial";

interface DrawerProps {
  title: string;
  row: Partial<SubstituteMaterial.ViewEntity>;
}

const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  title: "",
  row: {}
});

// 格式化时间
const formatDateTime = (dateTime: string | undefined) => {
  if (!dateTime) return "-";
  return new Date(dateTime).toLocaleString("zh-CN");
};

// 获取状态类型
const getStatusType = (status: string | undefined) => {
  const statusMap: Record<string, string> = {
    DRAFT: "info",
    PENDING_APPROVAL: "warning",
    ACTIVE: "success",
    REJECTED: "danger",
    EXPIRED: "info",
    OBSOLETED: "info"
  };
  return statusMap[status || ""] || "info";
};

// 获取状态文本
const getStatusText = (status: string | undefined) => {
  const statusMap: Record<string, string> = {
    DRAFT: "草稿",
    PENDING_APPROVAL: "待审批",
    ACTIVE: "可用",
    REJECTED: "拒绝",
    EXPIRED: "已过期",
    OBSOLETED: "废止"
  };
  return statusMap[status || ""] || status || "-";
};

// 是否显示拒绝信息
const showRejectInfo = computed(() => {
  return drawerProps.value.row.status === 'REJECTED' && drawerProps.value.row.rejectReason;
});

// 是否在有效期内
const isWithinValidPeriod = () => {
  const now = new Date();
  const validFrom = drawerProps.value.row.validFrom ? new Date(drawerProps.value.row.validFrom) : null;
  const validTo = drawerProps.value.row.validTo ? new Date(drawerProps.value.row.validTo) : null;
  
  if (!validFrom && !validTo) return true; // 没有设置有效期，认为永久有效
  if (validFrom && now < validFrom) return false; // 还未到有效期开始时间
  if (validTo && now > validTo) return false; // 已超过有效期结束时间
  
  return true;
};

// 接收父组件参数
const acceptParams = (params: DrawerProps) => {
  drawerProps.value = params;
  drawerVisible.value = true;
};

defineExpose({
  acceptParams
});
</script>

<style scoped>
.detail-container {
  padding: 0 20px;
}

.detail-card {
  margin-bottom: 20px;
}

.detail-card:last-child {
  margin-bottom: 0;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

:deep(.el-descriptions__label) {
  font-weight: 600;
}

:deep(.el-timeline-item__content) {
  padding-bottom: 20px;
}
</style>